   import React, { useState, useEffect, useMemo, useRef } from 'react';

   const VirtualList = () => {
       // 使用 useState 创建状态来存储列表数据
       const [dataList, setDataList] = useState([]);

       // 生成随机数据填充列表
       useEffect(() => {
           const generateRandomData = () => {
               const randomData = [];
               for (let i = 0; i < 100; i++) {
                   randomData.push(Math.random());
               }
               setDataList(randomData);
           };
           generateRandomData();
       }, []);

       // 计算当前显示的列表数据
       const visibleData = useMemo(() => {
           return dataList;
       }, [dataList]);

       // 使用 useRef 获取列表容器标签
       const listRef = useRef(null);

       // 监听滚动事件
       useEffect(() => {
           const handleScroll = () => {
               if (listRef.current) {
                   const container = listRef.current;
                   const startIndex = Math.floor(container.scrollTop / 50); // 根据实际情况调整每个数据项的高度
                   const endIndex = startIndex + Math.ceil(container.clientHeight / 50);
                   // 根据开始下标和结束下标更新显示的数据
                   // 这里可以进一步优化以提高性能
                   const newVisibleData = dataList.slice(startIndex, endIndex);
                   // 更新显示的数据状态
                   // setVisibleData(newVisibleData);
               }
           };
           if (listRef.current) {
               listRef.current.addEventListener('scroll', handleScroll);
           }
           return () => {
               if (listRef.current) {
                   listRef.current.removeEventListener('scroll', handleScroll);
               }
           };
       }, [dataList]);

       return (
           <div ref={listRef} style={{ height: '300px', overflowY: 'auto' }}>
               {visibleData.map((item, index) => (
                   <div key={index} style={{ height: '50px' }}>{item}</div>
               ))}
           </div>
       );
   };

   export default VirtualList;